<!-- 提交物流 -->
<template>
  <view class="submitExpress">
    <!-- 填写物流 -->
    <view class="form">
      <view class="item">
        <view class="title">
          <view class="point"> * </view>
          物流单号
        </view>
        <input
          class="topInput"
          v-model="expressQuery.postalCode"
          placeholder="请输入"
        />
      </view>
      <view
        class="item acea-row row-between-wrapper picker"
        @click="changeExpress($event)"
      >
        <view class="title">
          <view class="point"> * </view>
          物流公司
        </view>
        <view class="num">{{ express }}</view>
        <view v-show="!express">
          <text class="text">请选择</text>
          <text
            class="rotateZ iconfont icon-more1"
            style="font-size: 24rpx"
          ></text
        ></view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="btnContainer">
      <view class="addBtn" @click="addExpress"> 提交 </view>
    </view>
    <!-- 物流公司 -->
    <choosePopup
      :showChoose.sync="logisticsShowChoose"
      title="物流公司"
      :chooseList="expressPicker"
      @getChooseList="getReasonList"
      :isRadio="true"
    ></choosePopup>
  </view>
</template>

<script>
import { getExpressData, addExpressData } from "@/api/aftersales.js";
import choosePopup from "../../../../components/choosePopup/choosePopup.vue";
export default {
  components: {
    choosePopup,
  },
  data() {
    return {
      expressQuery: {
        code: "", // 快递公司编码
        name: "", // 快递公司名称
        postalCode: "SF1213132132", // 快递编号
        orderCode: "", // 订单编号
      },
      expressList: [],
      expressPicker: [],
      logisticsShowChoose: false, //物流公司弹出窗
      express: "",
    };
  },
  mounted() {
    this.expressQuery.orderCode = this.$yroute.query.orderCode;
    this.getExpress();
  },
  methods: {
    async getExpress() {
      const res = await getExpressData();
      console.log(res);
      this.expressList = res.data.map((item) => {
        return {
          id: item.id,
          name: item.name,
          code: item.code,
        };
      });
      this.expressPicker = res.data.map((item) => {
        return {
          name: item.name,
          code: item.code,
        };
      });
    },
    //退款原因返回值
    getReasonList(arr) {
      let _this = this;
      _this.express = arr[0].name;
      _this.expressQuery.code = arr[0].code;
      _this.expressQuery.name = arr[0].name;
      console.log("qqqqqqqq", arr, _this.expressQuery);
      _this.logisticsShowChoose = false;
    },
    changeExpress(e) {
      this.logisticsShowChoose = true;
      // this.express = this.expressPicker[e.mp.detail.value];
      // this.expressQuery.code = this.expressList[e.mp.detail.value].code;
      // this.expressQuery.name = this.expressList[e.mp.detail.value].name;
    },
    async addExpress() {
      let errMsg = "请选择";
      if (!this.expressQuery.code || !this.expressQuery.code) {
        errMsg += " 快递公司 ";
      }
      if (!this.expressQuery.postalCode) {
        errMsg += " 快递单号 ";
      }
      if (errMsg.length > 3) {
        uni.showToast({
          title: errMsg,
          icon: "none",
          duration: 2000,
        });
      }
      addExpressData(this.expressQuery)
        .then((res) => {
          uni.showToast({
            title: "物流填写成功！",
            icon: "none",
            duration: 2000,
          });
          this.$yrouter.push({
            path: "/packageShop/pages/order/ReturnList/index",
          });
        })
        .catch((err) => {
          uni.showToast({
            title: "提交物流信息失败！",
            icon: "none",
            duration: 2000,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.submitExpress {
  .form {
    margin-bottom: 170rpx;
    .picker {
      margin: 0;
      padding: 0;
      font-size: 28rpx;
      color: #999999;
    }

    .item {
      width: 100%;
      height: 80rpx;
      padding: 0 32rpx;
      line-height: 80rpx;
      background-color: #fff;
      display: flex;
      .title {
        font-size: 28rpx;
        color: #333333;
        width: 150rpx;
        display: flex;
        .point {
          color: #ea3729;
        }
      }
      .input {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  .btnContainer {
    width: 100%;
    height: 170rpx;
    background-color: #fff;
    box-shadow: 0px 0px 0px rgba(197, 202, 207, 0.5);
    position: fixed;
    bottom: 0;
    .addBtn {
      height: 90rpx;
      margin: 40rpx 30rpx;
      line-height: 90rpx;
      text-align: center;
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
      background: #FF5900;
    }
  }
}

.topInput {
  height: 41px;
  width: 100%;
  line-height: 41px;
  font-size: 14px;
  color: #999999;
  text-align: end;
}
</style>
